<template>
  <el-dialog
    v-if="dialogVisible"
    width="800px"
    title="详情"
    :lock-scroll="false"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    @close="handleClose"
  >
    <el-descriptions :column="4" border :label-style="label_style" :content-style="content_style">
      <el-descriptions-item label="操作模块" :span="2">{{ data.module }}</el-descriptions-item>
      <el-descriptions-item label="操作动作" :span="2">{{ data.action }}</el-descriptions-item>

      <el-descriptions-item label="请求地址" :span="3">{{ data.requestUrl }}</el-descriptions-item>
      <el-descriptions-item label="请求方式" :span="1">{{ data.requestMethod }}</el-descriptions-item>

      <el-descriptions-item label="请求数据" :span="4">
        <JsonViewer v-if="data.requestData" :value="JSON.parse(data.requestData)" boxed copyable>
          <template slot="copy">
            <i class="el-icon-document-copy" title="复制" />
          </template>
        </JsonViewer>
        <span v-else>-</span>
      </el-descriptions-item>

      <el-descriptions-item label="响应数据" :span="4">
        <JsonViewer v-if="data.responseData" :value="JSON.parse(data.responseData)" boxed copyable>
          <template slot="copy">
            <i class="el-icon-document-copy" title="复制" />
          </template>
        </JsonViewer>
        <span v-else>-</span>
      </el-descriptions-item>

      <el-descriptions-item label="执行时间" :span="4">{{ data.executeTime }} 毫秒</el-descriptions-item>

      <el-descriptions-item label="操作人账号" :span="2">{{ data.username }}</el-descriptions-item>
      <el-descriptions-item label="操作人姓名" :span="2">{{ data.nickName }}</el-descriptions-item>

      <el-descriptions-item label="操作地址" :span="2">{{ data.ipAddress }}</el-descriptions-item>
      <el-descriptions-item label="操作地点" :span="2">{{ data.geoLocation }}</el-descriptions-item>

      <el-descriptions-item label="操作设备" :span="2">{{ data.deviceInfo }}</el-descriptions-item>
      <el-descriptions-item label="浏览器" :span="2">{{ data.browserInfo }}</el-descriptions-item>

      <el-descriptions-item label="操作时间" :span="4">{{ data.operateTime }}</el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { getInfo } from '@/api/system/logs/operateLog'

export default {
  name: 'Detail',
  components: {
    JsonViewer: () => import('vue-json-viewer')
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      data: {},
      label_style: {
        'text-align': 'center',
        'font-weight': '600',
        'height': '30px',
        'width': '30%',
        'word-break': 'keep-all'
      },
      content_style: {
        'text-align': 'center',
        'min-width': '200px',
        'word-break': 'break-all'
      }
    }
  },
  created() {
    getInfo(this.id).then(res => {
      this.data = res.data
    })
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.jv-container.jv-light {
  background: #FAFAFA;
  border: 1px solid #EBEEF5;

  .boxed {
    text-align: left;
  }

  &:hover {
    box-shadow: none;
    border: 1px solid #EBEEF5;
  }
}
</style>
